import React, { Component } from 'react'
import { Carousel, Flex } from 'antd-mobile';
import { API } from "../../utils/api"
import { BASE_URL } from "../../utils/url"
import SearchHeader from '../../components/SearchHeader';
import "./index.scss"
import { getCurrentCity } from "../../utils"
const navData = [
    {
        id: 1,
        title: '整租',
        icon: 'iconfont icon-home1',
        path: "/home/searchhouse"
    },
    {
        id: 2,
        title: '合租',
        icon: 'iconfont icon-team',
        path: "/home/searchhouse"
    },
    {
        id: 3,
        title: '地图找房',
        icon: 'iconfont icon-location',
        path: "/home/profile"
    },
    {
        id: 4,
        title: '去出租',
        icon: 'iconfont icon-transaction',
        path: "/home/profile"
    }
]
//获取地理位置
navigator.geolocation.getCurrentPosition(position => {
    // console.log( position)
})

class Index extends Component {
    state = {
        swipers: [],
        isSwipersLoad: false,
        groupData: [],
        newsData: [],
        currentPosition: ''

    }
    // 获取轮播数据
    async getSwipers() {
        const res = await API.get("/home/swiper")
        this.setState({ swipers: res.data.body })
        this.setState({ isSwipersLoad: true })
    }
    //获取小组数据
    async getRentingGroup() {
        const res = await API.get('/home/groups', {
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        this.setState({ groupData: res.data.body })
        // console.log(res.data.body)
    }
    // 获取资讯数据
    async getNewsData() {
        const res = await API.get("/home/news")
        // console.log(res.data.body)
        this.setState({ newsData: res.data.body })
    }
    // 初始加载
    async componentDidMount() {
        // 获取轮播数据
        this.getSwipers()
        //获取小组数据
        this.getRentingGroup()
        // 获取资讯数据 
        this.getNewsData()
        //获取当前地理位置
        const curCity = await getCurrentCity()
        // console.log(curCity)
        this.setState({ currentPosition: curCity.label })
    }
    // 渲染轮播结构
    renderSwiper = () => {
        return this.state.swipers.map(item => (
            <a
                key={item.id}
                style={{ display: 'inline-block', width: '100%', height: 200 }}
            >
                <img
                    src={BASE_URL + item.imgSrc}
                    alt=""
                    style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
                />
            </a>
        ))
    }
    //渲染导航结构
    renderNav = () => {
        return navData.map(item => (<Flex.Item key={item.id}>
            <a onClick={() => {
                this.props.history.push(item.path);
            }}>
                <p className="nav-icon"><i className={item.icon}></i></p>
                <p className="nav-title">{item.title}</p>
            </a>
        </Flex.Item>))
    }
    // 渲染小组
    renderRentingGroup = () => {
        return this.state.groupData.map(item => (<div key={item.id} className="renting-group-content-item" >
            <div><p>{item.title}</p><span>{item.desc}</span></div>
            <div className="renting-group-content-item-img"><img src={BASE_URL + item.imgSrc} /></div>
        </div>))
    }
    // 渲染资讯
    renderNewsHtml = () => {
        return this.state.newsData.map(item => (<div key={item.id} className="new-content">
            <div className="new-content-left">
                <img src={BASE_URL + item.imgSrc} />
            </div>
            <div className="new-content-right">
                <div className="new-content-right-title">{item.title}</div>
                <div className="new-content-right-foot">
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                </div>
            </div>
        </div>))
    }
    render() {
        const { isSwipersLoad, currentPosition } = this.state
        return (
            <div className="index">
                <SearchHeader cityName={currentPosition} history={this.history} />
                {/* 轮播 */}
                {isSwipersLoad ?
                    <div className='swiper-box'>
                        <Carousel
                            autoplay
                            infinite
                            autoplayInterval={2000}
                        >
                            {this.renderSwiper()}
                        </Carousel>

                    </div> : ''}
                {/* 导航 */}
                <Flex>
                    {this.renderNav()}
                </Flex>
                {/* 租房小组 */}
                <div className="renting-group">
                    <div className="renting-group-title"><p>租房小组</p><span>更多</span></div>
                    <div className="renting-group-content">
                        {this.renderRentingGroup()}
                    </div>
                </div>
                {/* 资讯 */}
                <div className='new'>
                    <div className="new-title">最新资讯</div>
                    {this.renderNewsHtml()}
                </div>
            </div>
        );
    }
}
export default Index
